<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket - 聊天室</title>
    <style>
        #body{
            width:600px;
            border: 2px gainsboro solid;
        }
        #state{
            border: 2px gainsboro solid;
        }
    </style>
</head>
<body>
    <div id="body">
        <p>
            <textarea rows="20" cols="40" id="textarea">聊天记录:</textarea>
        </p>

<!--        <input type="text" id="msg" />-->
        <p>
            昵称: <input type="text" id="nickname"/>
        </p>
        <p>
            内容:  <textarea id="msg" type="button" rows="10" cols="40" placeholder=""></textarea>
        </p>
        <input id="msgBtn" type="button" onclick="send()" value="发送">
        <div id="state">
            <p>用户状态</p>
            <p>xxx</p>
        </div>
    </div>
</body>
<script>
    const ws = new WebSocket("ws://localhost:666/api/web/socket/test");
    ws.send = message =>{
        console.log("webSocket send()")
    }
    ws.sendToAll = (nickname,message) =>{
        console.log("webSocket sendToAll()")
    }
    ws.onopen = event =>{
        console.log("创建连接")
    }
    ws.onclose = event =>{
        console.log("关闭连接")
    }
    ws.onmessage = event =>{

        // document.get
        console.log("收到数据:"+event.data)
    }
    function send() {
        let msg = document.getElementById("msg").value;
        let nickname = document.getElementById("nickname").value;
        //添加数据然后换行
        document.getElementById("textarea").value = document.getElementById("textarea").value+nickname+": "+msg+";";
        console.log("nickname="+nickname+",msg=",msg)
        // ws.send(msg)
        ws.sendToAll(nickname,msg)
        document.getElementById("msg").value="";
    }
</script>
</html>